<template>
    <div  class="sg-wrap  sg-parentStyle" @click="goDetail">
        <div :class="imgWrap">
            <img :src="guessInfo.img" alt="">
            <div class="sg-sale" v-if="guessInfo.sale">已售{{guessInfo.sale}}件</div>
        </div>
        
        <slot></slot>
        <!-- <p>{{guessInfo.title}}</p>
        <div class="sg-infoWrap">
            <b>￥ {{guessInfo.price}}</b>
            <span class="iconfont">{{guessInfo.cfav}}&#xe668;</span>
        </div> -->
        

    </div>
</template>

<script>
export default {
    props:{
        guessInfo:{
            default:null
        },
        "sg-imgWrap":{
            default:true
        },
        mhgyl:{
            default:false
        },
        mcrd:{
            default:false
        },
        gst:{
            default:false
        }
    },
    computed:{
        imgWrap(){
            return {
                "sg-imgWrap":this.sgImgWrap,
                "mhgyl":this.mhgyl,
                "mcrd":this.mcrd,
                "gst":this.gst
            }
        }
    },
    methods:{
        goDetail(){
            this.$store.commit("setGoodsDetail",this.guessInfo);
            this.$router.push({path:`/goodsDetail/${this.guessInfo.tradeItemId}`});
        }
    },
    mounted(){
    }
  
}
</script>

<style lang="less">
    .sg-wrap{
        width:100%;
        margin-bottom: 0.3rem;
        background-color: #fff;
        border-radius: 0.1rem;
        >.sg-imgWrap{
            position: relative;
            width:100%;
            >img{
                border-radius: 0.15rem;
                width:100%;
                height:100%;
            }
            >.sg-sale{
                position: absolute;
                left:0;
                bottom:0.2rem;
                width:70%;
                height: 0.35rem;
                line-height: 0.35rem;
                background:linear-gradient(to right,  rgba(50, 50, 50, 0.5) 0%,rgba(50, 50, 50, 0.5) 60%,transparent 100%);
                color:#fff;
                text-indent: 0.1rem;
            }
        }
        //主页猜你喜欢样式
        >.mhgyl{
            height:4.6rem
        }
        >.mhgyl-p{
            height:0.6rem;
            margin:0.1rem 0;
            text-indent: 0.2rem;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        >.mhgyl-sg-infoWrap{
            display:flex;
            justify-content: space-between;
            align-items: center;
            >b{
                font-size:0.27rem;
            }
            >.iconfont{
                font-size: 0.15rem;
                color:#777;
            }
        }

        //分类页猜你喜欢样式
        >.mcrd{
            height:3.02rem
        }
        >.mcrd-p{
            margin:0.1rem 0 0.05rem;
            overflow : hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        >.mcrd-sg-infoWrap{
            display:flex;
            justify-content: space-between;
            align-items: center;
            >b{
                font-size:0.25rem;
                color:#FC5779;
            }
            >.iconfont{
                font-size: 0.13rem;
                color:#777;
            }
        }

        //商品展示页样式
        >.gst{
            height:4.2rem
        }
        >.gst-p{
            height:0.77rem;
            overflow: hidden;
            margin:0.05rem 0;
            >span{
                color:#748790;
                display: inline-block;
                background-color: #EFF3F6;
                margin:0.05rem 0.05rem 0;
                padding:0 0.05rem;
                border-radius: 0.05rem;
            }
        }
        >.gst-sg-infoWrap{
            display:flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 0.15rem;
            >b{
                font-size:0.27rem;
            }
            >.iconfont{
                font-size: 0.15rem;
                color:#777;
            }
        }
    }
</style>
